<template>
    <div class="chat-lang-ctl dropdown">
        <a class="lang-text" :class="{'active': label === value}" href="#" data-toggle="dropdown">
            <span> {{label}} </span>
            <i class="caret" style="margin-left: -2px;"></i>
        </a>
        <ul class="dropdown-menu">
            <li class="item" :class="{'active': item === value}" v-for="item in tags" @click="onSelect(item)">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "ChatLangCtl",
        props: {
            tag: {
               type: String,
               default: ''
            },
            value: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                label : ''
            }
        },
        created() {
            this.label = this.tag
            this.tags = [this.tag, this.tag + '+', this.tag + '-']
        },
        methods: {
            onSelect(item) {
                this.label = item
                this.$emit("input", item)
            }
        },
        watch: {
            value() {
                if (this.tags.indexOf(this.value) === -1) {
                    this.label = this.tags[0]
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .chat-lang-ctl
        .lang-text
            display :block;
            color :#fff;
            padding :0 4px;
            &.active
                background-color :#01c0c8;
                color: #fff;
        .dropdown-menu
            color :#000;
            .item
                padding :4px;
                &.active
                    background-color :#01c0c8;
                    color: #fff;
                &:hover
                    background-color :#01c0c8;
                    color: #fff;
</style>